<template>
    <div class="page">
        <div class="header">
            <div class="left-box">
                <!-- <div class="title">StockTrader</div> -->
                <div class="icon" style="--icon: url(/Logo-Web-1300-300.png)"></div>
                <div class="date">{{ d || 'StockPro' }} • <span :style="`color: ${ market_status.close ? 'var(--positive-number-color)' : 'var(--negative-number-color)' }`">Market {{ market_status.close ? 'Open' : 'Closed' }}</span></div>
            </div>
            <div class="right-box">
                <div class="icon language-btn" style="--icon: url(/language/international.svg)" @click="openLanguageSelector"></div>
            </div>
        </div>
        <router-view class="tabbar-view"></router-view>
        <div class="tabbar">
            <div class="tabbar-item" v-for="item in link_list" :key="item.id" @click="item.click">
                <div class="icon-box">
                    <div class="icon" :style="`--w: 100%; --h: 100%; --icon: url(${ item.icon }); opacity: ${ item.id == active_nav_item.id ? 0 : 1 }`"></div>
                    <div class="icon" :style="`--w: 100%; --h: 100%; --icon: url(${ item.active_icon }); opacity: ${ item.id == active_nav_item.id ? 1 : 0 }`"></div>
                </div>
                <div class="text" :style="`color: ${ item.id == active_nav_item.id ? 'var(--active-color)' : 'var(--text-color)' }`">{{ item.text }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { link_list, active_nav_item, get_active_nav_item } from "@/service/tabbar.js";
import { openLanguageSelector } from '@/service/language.js';
import { userService } from "@/service/user.js";
import { assetService } from "@/service/asset.js";
import { market_status } from '@/service/market.js';

// 定义星期和月份的缩写映射数组
const WEEK_DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

const d = ref('');

function updateDate() {
    setInterval(() => {
        getDate();
    }, 1000);
}

function getDate() {
    // // 0. 创建一个 Date 对象
    // const date = new Date();
    // // 1. 提取星期缩写（getDay() 返回 0-6，对应 WEEK_DAYS 索引）
    // const dayOfWeek = WEEK_DAYS[date.getDay()];
    // // 2. 提取月份缩写（getMonth() 返回 0-11，对应 MONTHS 索引）
    // const monthAbbr = MONTHS[date.getMonth()];
    // // 3. 提取日期（getDate() 返回当月第几天，如 31）
    // const dayOfMonth = date.getDate();
    // // 4. 组合成目标格式
    // d.value = `${dayOfWeek}, ${monthAbbr} ${dayOfMonth}`;

    // 创建一个 Date 对象
    const now = new Date();
    
    // 设置为美国东部时间（EST/EDT）
    // 使用 'America/New_York' 时区，它会自动处理夏令时和冬令时
    const options = {
        timeZone: 'America/New_York',
        weekday: 'short',
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
    };
    
    // 格式化时间为美国东部时间
    const formatter = new Intl.DateTimeFormat('en-US', options);
    const parts = formatter.formatToParts(now);
    
    // 提取各部分
    const weekday = parts.find(part => part.type === 'weekday').value;
    const year = parts.find(part => part.type === 'year').value;
    const month = parts.find(part => part.type === 'month').value;
    const day = parts.find(part => part.type === 'day').value;
    const hour = parts.find(part => part.type === 'hour').value;
    const minute = parts.find(part => part.type === 'minute').value;
    const second = parts.find(part => part.type === 'second').value;
    
    // 组合成目标格式：星期, 月/日/年 时:分:秒
    d.value = `${ weekday }, ${ month }/${ day }/${ year } ${ hour }:${ minute }:${ second }`;
}

onMounted(() => {
    // 优化用户直接输入地址进入页面时 导航栏对应位置进行高亮
    get_active_nav_item();
    // 获取用户信息
    userService.getUserInfo();
    // 开启定时器计算日期
    updateDate();
});
</script>

<style scoped lang="less">
.page {
    .header, .tabbar {
        width: 100vw;
        background-color: #fff;
        box-shadow: 0 0 1.5vw rgba(0, 0, 0, 0.1);
    }

    .header {
        box-sizing: border-box;
        height: var(--header-height);
        padding: 2vw 4vw;
        display: flex;
        justify-content: space-between;
        position: sticky;
        top: 0;
        left: 0;
        z-index: 100;

        .left-box {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 1vw;

            .icon {
                --w: 26vw;
                --h: 6vw;
                background-position: 0 50%;
            }

            // .title {
            //     font-size: 4vw;
            //     font-weight: 700;
            //     color: var(--active-color);
            // }

            .date, .date span {
                font-size: 2.5vw;
                color: var(--text-light-color);
                font-weight: 500;
            }
        }

        .right-box {
            display: flex;
            justify-content: flex-end;
            align-items: center;

            .language-btn {
                --size: 5.5vw;
                --w: var(--size);
                --h: var(--size);
            }
        }
    }

    .tabbar-view {
        box-sizing: border-box;
        min-height: calc(100vh - var(--header-height) - var(--tabbar-height));
    }

    .tabbar {
        height: var(--tabbar-height);
        position: sticky;
        left: 0;
        bottom: 0;
        display: flex;

        &-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .icon-box {
                --size: 5.5vw;
                width: var(--size);
                height: var(--size);
                position: relative;

                .icon {
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            }

            .text {
                font-size: 2.5vw;
            }
        }
    }
}
</style>